<template>
  <div class="home-container app-container">
    <div class="home-header">
      <el-row :gutter="12">
        <el-col :span="8">
          <div class="header-item">
            <div class="item-title">已上架能力</div>
            <div class="item-num">16</div>
            <div class="item-footer">
              <div>今日新增 <span class="item-add">4</span></div>
              <div>今日涨幅 <span class="item-increase">1%</span></div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="header-item">
            <div class="item-title">已下架能力</div>
            <div class="item-num">4</div>
            <div class="item-footer">
              <div>今日新增 <span class="item-add">4</span></div>
              <div>今日涨幅 <span class="item-increase">1%</span></div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="header-item">
            <div class="item-title">新申请能力</div>
            <div class="item-num">3</div>
            <div class="item-footer">
              <div>今日新增 <span class="item-add">4</span></div>
              <div>今日涨幅 <span class="item-increase">1%</span></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="home-table">
      <div class="table-title">
        <span>能力申请记录</span>
        <div class="picker-wrap">
          <el-date-picker
            v-model="searchDate"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="handleDateChange" />
        </div>
      </div>
      <one-table ref="tableRef" :data="tableData" :total="total" border :loading="loading" @update="getList" row-key="id">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="Request_No" label="申请单号" align="center" width="100" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="name" label="能力名称 " align="center" width="160" show-overflow-tooltip />
        <el-table-column prop="tag" label="版本号" align="center" width="120" show-overflow-tooltip />
        <el-table-column prop="type" label="能力分类" align="center" width="100" show-overflow-tooltip />

        <!-- <el-table-column prop="bereviewedStatus" label="评审状态" align="center" show-overflow-tooltip /> -->
        <el-table-column prop="bereviewedStatus" label="评审状态" align="center" width="100" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag :type="row.bereviewedStatus === '已评审' ? 'success' : row.bereviewedStatus === '待评审' ? 'danger' : ''">
              {{ row.bereviewedStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="onStatus" label="上架状态" align="center" show-overflow-tooltip />
        <el-table-column prop="method" label="交付方式" width="110" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <el-tag>{{ row.method }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="describe" label="描述" align="center" width="130" show-overflow-tooltip />
        <el-table-column prop="belong" label="归属省" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="provider" label="提供方" align="center" width="130" show-overflow-tooltip />
        <el-table-column prop="contact" label="联系人" align="center" width="80" show-overflow-tooltip />
        <el-table-column prop="contactPhone" label="联系电话" align="center" width="120" show-overflow-tooltip />

        <el-table-column prop="uploadUser" label="上传人" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="uploadTime" label="上传时间" align="center" width="170" show-overflow-tooltip />
        <el-table-column prop="operator" label="操作" width="160px" align="center" fixed="right">
          <template #default="{ row }">
            <el-button link @click="handleShow(row)" type="primary" icon="View" size="small">查看详情</el-button>
            <el-button link type="primary" size="small" icon="Edit" @click="handle('edit', row)">评审</el-button>
          </template>
        </el-table-column>
      </one-table>
      <Detail v-if="isDialog" :currentRow="currentRow" :type="type" @close="closeDialog" />
      <!-- <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="code" label="能力编码" align="center" width="130" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="name" label="能力名称 " align="center" width="160" show-overflow-tooltip />
        <el-table-column prop="tag" label="版本号" align="center" width="120" show-overflow-tooltip />
        <el-table-column prop="type" label="能力分类" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="onStatus" label="上架状态" align="center" show-overflow-tooltip />
        <el-table-column prop="method" label="交付方式" align="center" show-overflow-tooltip />
        <el-table-column prop="describe" label="描述" align="center" width="130" show-overflow-tooltip />
        <el-table-column prop="banner" label="展示banner" align="center" width="130" show-overflow-tooltip />
        <el-table-column prop="belong" label="归属省" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="provider" label="提供方" align="center" width="130" show-overflow-tooltip />
        <el-table-column prop="contact" label="联系人" align="center" width="80" show-overflow-tooltip />
        <el-table-column prop="contactPhone" label="联系电话" align="center" width="120" show-overflow-tooltip />

        <el-table-column prop="uploadUser" label="上传人" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="uploadTime" label="上传时间" align="center" width="170" show-overflow-tooltip />
        <el-table-column prop="pullCount" label="拉取次数" align="center" width="100" show-overflow-tooltip />
      </el-table>
      <div class="pagination-wrap">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import to from 'await-to-js'
import OneTable from '@/component/public/table/oneTable.vue'
import { getAbilityList, getOperationList } from '@/utils/data'
import Detail from './review/detail.vue'
let tableData = ref([])
let searchDate = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)
const isDialog = ref(false)
const currentRow = ref()
const type = ref('edit')

const getList = async (val: UserInfo) => {
  let params = { ...val, bereviewedStatus: '待评审' }
  tableData.value = []
  loading.value = true
  const [err, res] = await to(getOperationList(params))
  loading.value = false
  if (err) return
  tableData.value = res.list || []
  total.value = res.total || []
}

const handleShow = (val) => {
  window.open(`/demo/ability/${val.abilityId}`)
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const closeDialog = (search: Boolean) => {
  isDialog.value = false
  search && searchTable()
}

const handle = (currentType: HandleType, row?: UserInfo) => {
  currentRow.value = row
  type.value = currentType
  isDialog.value = true
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.home-container {
  padding: 0px;
  background-color: #f2f2f2;
  .home-header {
    padding: 20px;
    background-color: #ffffff;
    .header-item {
      background-color: #f2f2f2;
      border-radius: 5px;
      padding: 10px 20px;
      color: #999999;
      font-size: 14px;
      .item-title {
      }
      .item-num {
        margin: 10px 0;
        color: #666666;
        font-size: 36px;
        font-weight: bold;
      }
      .item-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item-add {
          color: #409eff;
        }
        .item-increase {
          color: #66bbb3;
        }
      }
    }
  }
  .home-table {
    margin-top: 20px;
    padding: 20px;
    background-color: #ffffff;
    .table-title {
      font-size: 16px;
      color: #333333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      margin-bottom: 20px;
      .picker-wrap {
        width: 300px;
      }
    }
    .pagination-wrap {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
